<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.item{
				border:1px solid red;
				width: 200px;
				height: 390px;
				background-image:url("http://zhangli6.top/xdkj/img/ls_58.gif") ;
			}
			.top_on{
				width: 0%;
				height: 100%;
				background-color: rgba(0,0,0,0.5);
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="item">
			<div class="top_on">
				<h1>哈哈</h1>
			</div>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(".item").mouseover(function(){
			$(".top_on").animate({
				width:"100%"
			})
		})
	</script>
</html>
